<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { useRoute, RouterLink } from 'vue-router';
import apiClient from '@/api.ts';
import MarkdownIt from 'markdown-it';
import hljs from 'highlight.js';

interface Post {
  title: string;
  content_markdown: string;
  created_at: string;
}

const route = useRoute();
const post = ref<Post | null>(null);
const md: MarkdownIt = new MarkdownIt({
  highlight: function (str: string, lang: string): string {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return '<pre class="hljs"><code>' +
               hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
               '</code></pre>';
      } catch (__) {}
    }
    return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
  }
});

const fetchPost = async () => {
  try {
    const response = await apiClient.get(`/api/posts/${route.params.id}`);
    post.value = response.data;
  } catch (error) {
    console.error('Failed to fetch post:', error);
  }
};

const renderedContent = computed(() => {
  if (post.value && post.value.content_markdown) {
    return md.render(post.value.content_markdown);
  }
  return '';
});

const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleDateString();
};

onMounted(fetchPost);
</script>

<template>
  <div class="post-container">
    <header class="post-header">
      <RouterLink to="/" class="back-link">&larr; 返回首页</RouterLink>
    </header>
    <article v-if="post" class="post-content">
      <h1>{{ post.title }}</h1>
      <p class="post-meta">发布于 {{ formatDate(post.created_at) }}</p>
      <div v-html="renderedContent" class="markdown-body"></div>
    </article>
    <div v-else class="loading">
      正在加载文章...
    </div>
  </div>
</template>

<style scoped>
.post-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

.post-header {
  margin-bottom: 2rem;
}

.back-link {
  text-decoration: none;
  color: #007bff;
  font-weight: bold;
}

.post-content h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.post-meta {
  font-style: italic;
  color: #888;
  margin-bottom: 2rem;
}

.markdown-body {
  line-height: 1.7;
}

/* Basic styles for rendered markdown */
:deep(.markdown-body h1),
:deep(.markdown-body h2),
:deep(.markdown-body h3) {
  border-bottom: 1px solid #eee;
  padding-bottom: 0.3em;
}

:deep(.markdown-body pre) {
  padding: 0;
  border-radius: 6px;
  overflow-x: auto;
}

:deep(.markdown-body code) {
  font-family: 'Courier New', Courier, monospace;
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

:deep(.markdown-body pre code) {
  padding: 0;
  background-color: transparent;
}

:deep(.markdown-body blockquote) {
  border-left: 0.25em solid #dfe2e5;
  padding: 0 1em;
  color: #6a737d;
}

:deep(.markdown-body img) {
  max-width: 100%;
  height: auto;
}

/* Dark Mode Adjustments */
body.dark-mode .markdown-body {
  color: var(--color-text);
}
body.dark-mode :deep(.markdown-body h1),
body.dark-mode :deep(.markdown-body h2),
body.dark-mode :deep(.markdown-body h3) {
  border-color: var(--color-border);
}
body.dark-mode :deep(.markdown-body blockquote) {
  border-left-color: var(--color-border-hover);
  color: var(--color-text-mute);
}
</style>